<template>
	<div class="OverflowTagContainer">
		<YhTag
			v-for="(tag, index) in tagList.slice(0, maxShowCount)"
			:key="index"
			:type="typeof tag === 'string' ? undefined : tag[typeProp]"
			:title="typeof tag === 'string' ? tag : tag[textProp]"
		>
			{{ typeof tag === 'string' ? tag : tag[textProp] }}
		</YhTag>

		<el-popover placement="top" trigger="hover" effect="light">
			<template #reference>
				<div class="Counter noSelect" v-if="tagList.length > maxShowCount">+ {{ tagList.length - maxShowCount }}</div>
			</template>
			<template #default>
				<div class="OverflowTagContainer-PopoverContainer">
					<YhTag
						v-for="(tag, index) in tagList.slice(maxShowCount)"
						:key="index"
						:type="typeof tag === 'string' ? undefined : tag[typeProp]"
						:title="typeof tag === 'string' ? tag : tag[textProp]"
					>
						{{ typeof tag === 'string' ? tag : tag[textProp] }}
					</YhTag>
				</div>
			</template>
		</el-popover>
	</div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import { YhTag } from 'yh-ui';

defineProps({
	tagList: {
		type: Array as PropType<(any | string)[]>,
		default: () => [],
	},
	// 当tagList为对象数组时，tag文本字段
	textProp: {
		type: String,
		default: 'text',
	},
	// 当tagList为对象数组时，tag类型字段
	typeProp: {
		type: String,
		default: 'type',
	},
	// 最多显示的tag数量
	maxShowCount: {
		type: Number,
		default: 1,
	},
});
</script>

<style scoped lang="scss">
.OverflowTagContainer {
	width: fit-content;
	display: flex;
	gap: 4px;

	.Counter {
		width: fit-content;
		height: 26px;
		color: #909399;
		font-size: 14px;
		background-color: #f4f4f5;
		border: 1px solid #e9e9eb;
		border-radius: 2px;
		padding: 0 6px;
		cursor: default;
	}

	:deep(.el-tag) {
		max-width: 90px;
		margin-left: 0;
		padding: 0 9px;

		.el-tag__content {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 24px;
		}
	}
}
</style>

<style lang="scss">
.el-popover:has(.OverflowTagContainer-PopoverContainer) {
	width: fit-content !important;
	min-width: 46px !important;
}

.OverflowTagContainer-PopoverContainer {
	max-width: 500px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;

	.el-tag {
		padding: 0 9px;

		.el-tag__content {
			line-height: 24px;
		}
	}
}
</style>
